<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>丁真后援会</h1>
       
            <input type="checkbox" v-model="all" @change="selectall()">全选
        
        <div  v-for="i in list">
            <input type="checkbox" :value="i.name" v-model="i.check" @change="checkclick()">{{i.name}}</div>

        新增其他：<input type="text" v-model="newname"><br>
        <input type="file" @change="load($event)"> <button @click="add()">上传</button>
        <br>
        <button @click="selectall2()">全选</button>
        <button @click="noselectall()">全不选</button>
        <button @click="oppose()">反选</button>
        <div v-for="i in list">
            <img :src="i.src" width="500px" height="500px" v-show="i.check" >
            
        </div>

</div>
</body>
</html>
<script>
    const app = Vue.createApp({
        data() {
            return {
                all:false,
                selectitem:[],
                list:[{name:'丁真',check:false,src:'丁真.jpeg'},
                    {name:'一眼丁真',check:false,src:'一眼丁真.png'}],
                fileSrc:'',
                newname:''
                
            }
        },
        methods: {
                selectall(){
                    if(this.all){
                        this.list.map(v=>{
                            v.check=true

                        })

                    }else{
                        this.list.map(v=>{
                            v.check=false

                        })
                    }
                },
                selectall2(){
                    this.all=true
                    
                    this.list.map(v=>{
                            v.check=true

                    })

                    
                },
                noselectall(){
                    this.all=false
                    this.list.map(v=>{
                            if(v.check){v.check=false}
                            

                    })
                },
                oppose(){
                    this.list.map(v=>{
                        v.check=!v.check
                    })
                },
                checkclick(){
                    let flag=this.list.length
                    this.list.map(v=>{
                        if(!v.check)flag--
                    })
                    if(flag<this.list.length)
                        this.all=false
                    else
                        this.all=true
                },
                load(e){
                    let file=e.target.files
                    let img=new FileReader();
                    img.readAsDataURL(file[0])
                    img.onload=({target})=>{
                        alert("上传成功")
                        this.fileSrc=target.result

                    }


                },
                add(){
                    this.list.push({name:this.newname,check:false,src:this.fileSrc})
                }
        },
        watch:{



        }



    }).mount("#app")


</script>